import React, { Component } from 'react'
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import {
    Modal,
    Toast,
    Flex,
    Button,
    List,
    Checkbox,
    InputItem,
    Picker
} from 'antd-mobile';

import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import { createForm } from 'rc-form';
import getAreaData from './areaData';
const  areaData= getAreaData();
import { edit_address, save_btn } from './addressEdit.less';

const Item = List.Item;


class EditAddress extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const { orderAddress, match, dispatch } = this.props;
        console.log(this.props);
        let addressItem = orderAddress.addressEntities.filter((v,i,a)=>{
            return v.id==match.params.id
        });
        console.log(addressItem);
        if(addressItem.length>0){
            this.props.form.setFieldsValue({
                isDefault: addressItem[0].isDefault,
                trueName: addressItem[0].trueName,
                mobPhone: addressItem[0].mobPhone,
                address: addressItem[0].address,
                areaInfo: [
                    addressItem[0].provinceId,
                    addressItem[0].cityId,
                    addressItem[0].areaId
                ]
            });
        }else {
            dispatch({ type:"orderAddress/getAddressItemEFF", obj:{ id:match.params.id } }).then(r=>{
                this.props.form.setFieldsValue({
                    isDefault: r.isDefault,
                    trueName: r.trueName,
                    mobPhone: r.mobPhone,
                    address: r.address,
                    areaInfo: [
                        r.provinceId,
                        r.cityId,
                        r.areaId
                    ]
                });
            });

        }
    }

    onPickerChange = (value) => {
        //console.log(value);
    }

    onSubmit = () => {

        const fieldsValue = this.props.form.getFieldsValue();
        // check
        if (!fieldsValue.trueName || fieldsValue.trueName == '') {
            Toast.info('收货人姓名不能为空');
            return;
        }
        if (!fieldsValue.mobPhone || fieldsValue.mobPhone.trim() == '') {
            Toast.info('手机号不能为空');
            return;
        }
        if (!/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/.test(fieldsValue.mobPhone.replace(/\s/g,''))) {
            Toast.info('手机号格式不正确');
            return;
        }

        console.log(fieldsValue.areaInfo);
        if (!fieldsValue.areaInfo || fieldsValue.areaInfo.length == 0) {
            Toast.info('请选择所在地区');

            return;
        }
        if (!fieldsValue.address || fieldsValue.address == '') {
            Toast.info('详细地址不能为空');
            return;
        }

        const provinceId = fieldsValue.areaInfo[0];
        const cityId = fieldsValue.areaInfo[1];
        const areaId = fieldsValue.areaInfo[2];

        const currentProvince = (areaData.filter(item => item.value == provinceId))[0];
        const currentCity = (currentProvince.children.filter(item => item.value == cityId))[0];
        const currentArea = (currentCity.children.filter(item => item.value == areaId))[0];
        const currentAreaName = [currentProvince.label, currentCity.label, currentArea.label].join(',');

        console.log(fieldsValue,currentAreaName);

        let address = {
            trueName:fieldsValue.trueName,
            mobPhone:fieldsValue.mobPhone.replace(/\s/g,''),
            address:fieldsValue.address,
            areaInfo:currentAreaName,
            areaId:fieldsValue.areaInfo[2],
            cityId:fieldsValue.areaInfo[1],
            provinceId:fieldsValue.areaInfo[0],
            addressId:this.props.match.params.id,
            isDefault:fieldsValue.isDefault
        };
        this.props.dispatch({ type:'orderAddress/saveAddressEFF', obj:address } )
    }

    onDeleteAddr = async () => {
        const { match, dispatch } = this.props;
        let result = await dispatch({type:"orderAddress/delAddressEFF",obj: {id: match.params.id}})
        console.log('调用后处理', result)
        Toast.success(`删除${result ? '成功' : '失败'}`, 1.5,()=>{
            dispatch(routerRedux.goBack())
        });

    }

    render() {
        const { dispatch } = this.props;
        const { getFieldProps } = this.props.form;


        //console.log(JSON.stringify(convertedData));

        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
                // className={addressList}
            >
                <NavTopBar dispatch={dispatch} title="编辑收货地址" rightContent={[<span onClick={this.onDeleteAddr} style={{color: '#999'}} key="delete">删除</span>]}/>
                <MyScroll>
                    <div className={edit_address}>
                        <List className="picker-list">
                            <InputItem
                                {...getFieldProps('trueName')}
                                clear
                                placeholder="请输入收货人"
                            >收货人:</InputItem>

                            <div style={{ display:'none' }}>
                                <InputItem
                                    {...getFieldProps('isDefault')}
                                    clear
                                    placeholder=""
                                ></InputItem>
                            </div>


                            <InputItem
                                {...getFieldProps('mobPhone')}
                                clear
                                type='phone'
                                placeholder="请输入手机号"
                            >手机号:</InputItem>

                            <Picker
                                data={areaData}
                                title="选择地区"
                                onPickerChange={this.onPickerChange}
                                {...getFieldProps('areaInfo')}
                            >
                                <List.Item arrow="horizontal">所在地区:</List.Item>
                            </Picker>

                            <InputItem
                                {...getFieldProps('address')}
                                clear
                                placeholder="详细地址">详细地址:</InputItem>

                        </List>
                    </div>
                </MyScroll>

                <Button className={save_btn} onClick={this.onSubmit} type='primary'>保存</Button>
            </Flex>

        )


    }
}



export default connect(({orderAddress})=>({orderAddress}))(createForm()(EditAddress))

